<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		<!-- 基础公有css -->
		<link rel="stylesheet" href="css/index.css" />
		
		<link rel="stylesheet" href="css/result.css" />
		<link rel="stylesheet" href="css/income.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">推广返利</span>
					<span class="nav-item">我的收入</span>
				</div>

				<ul class="notice-wrapper">
					<li class="notice-item">说明：提交提现申请后，衡天云财务将审核推广佣金，审核无误即刻为您结算。佣金金额以到账金额为准。</li>
				</ul>
				<el-row  class="el-row" :gutter="20"  style="margin-left: -10px !important;margin-right: -10px !important;display: flex;flex-wrap: wrap;">
					<el-col :sm="16">
						<div class="form-wrapper  survey">
							<div class="from-title-wrapper">
								<span class="from-title">
									收益概览
								</span>
							</div>
							
							<div class="contact-wrapper fboxRow">
								<div @click="submitwithdrawdepositMoney" :class="{'noClick': !canWithdrawdeposit}" class="yzButton withdrawdeposit">
									立即提现
								</div>
								<div class="contact-item">
									<p class="item-title">
										已提现金额（元）
									</p>
									<p class="item-val">
										{{earningsInfo.alreadywithdrawdepositMoney}}
									</p>
								</div>
								<div class="contact-item">
									<p class="item-title">
										可提现金额（元）
									</p>
									<p class="item-val">
										{{earningsInfo.canwithdrawdepositMoney}}
									</p>
								</div>

							</div>
						</div>
					</el-col>
					<el-col  :sm="8">
						<div class="form-wrapper  userinfo">
							<div class="from-title-wrapper">
								<span class="from-title">
									收款人信息
								</span>
								<div  @click="handleClicksettingaccount" class="yzButton   lightToDeep">
									 {{haveAccountInfo? '修改账户': '设置账户'}} 
								</div>
							</div>
							<el-dialog @closed="closedialog('ruleForm')"  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogsettingAccount">
								<div slot="title" class="dialog-title">
									设置账户
								</div>
								<div class="dialog-content">
									<div class="dialog-content-infowrapper fboxRow  mb-20">
										<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
										<p class="fboxCenter" style="line-height: 25px;">
											请确保填写的账号信息为您本人账号信息，因账号填写错误导致的一切后果由您
											自行承担。
										</p>
									</div>
									<div class="dialog-form-wrapper">
										<el-form :model="userForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
											<el-form-item label="支付宝账号：" prop="accountNum">
											    <el-input style="width: 320px;" v-model="userForm.accountNum"></el-input>
											</el-form-item>
											<el-form-item label="账户名：" prop="accountName">
											    <el-input style="width: 320px;" v-model="userForm.accountName"></el-input>
											</el-form-item>
										</el-form>
									</div>
									
									
									<div class="dialog-button-wrapper fboxRow">
										<div @click="saveSettingAccount('ruleForm')"  class="yzButton  confirm">保存</div>
										<div @click="dialogsettingAccount = false" class="yzButton cancelButton">取消</div>
									</div>
								</div>
							</el-dialog>
							
							
							<div class="contact-wrapper fboxRow">
								<table class="w100">
								<tr>
									<td>
										<span class="item-key nowrapShowpointer">提现渠道：</span>
										<span class="item-val nowrapShowpointer">{{userInfo.trench}}</span>
									</td>
									<td>
										<span class="item-key nowrapShowpointer">账户名：</span>
										<span class="item-val nowrapShowpointer">{{userInfo.accountName}} </span>
									</td>
								</tr>
								<tr>
									<td>
										<span class="item-key nowrapShowpointer">支付宝账号：</span>
										<span class="item-val nowrapShowpointer">{{userInfo.accountNum}}</span>
									</td>
								</tr>
								</table>
							</div>
						</div>
					</el-col>
					<el-col  :sm="16">
						<div class="form-wrapper">
							<div class="from-title-wrapper  noborder">
								<span class="from-title">
									佣金详情
								</span>
							</div>
							<el-table class="table" empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
								<el-table-column label="月份" width="auto">
									<template slot-scope="scope">
										{{scope.row.monthNum? scope.row.monthNum : '-'}}
									</template>
								</el-table-column>
						
						
								<el-table-column label="订单实付金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.orderActualpaymoney? '¥ ' + scope.row.orderActualpaymoney : '-'}}
									</template>
								</el-table-column>
						
								<el-table-column label="降配/退款金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.orderRefundmoney? '¥ ' + scope.row.orderRefundmoney : '-'}}
									</template>
								</el-table-column>

						
								<el-table-column label="有效支付金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.validPayMonty? '¥ ' + scope.row.validPayMonty : '-'}}
									</template>
								</el-table-column>
								
								<el-table-column label="待确认金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.waitconfirmMoney? '¥ ' + scope.row.waitconfirmMoney : '-'}}
									</template>
								</el-table-column>
						
						
								<el-table-column label="有效佣金" width="auto">
									<template slot-scope="scope">
										{{scope.row.commissionRate? scope.row.commissionRate + ' %' :'-' }}
									</template>
								</el-table-column>
								
								<el-table-column label="可提现金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.withdrawdepositMoney? '¥ ' +  scope.row.withdrawdepositMoney :'-' }}
									</template>
								</el-table-column>
							</el-table>
							<div class="pagination-wrapper">
								<div class="total-wrapper">
									<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
									<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
										<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</div>
								<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
								 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
								</el-pagination>
							</div>
						
						</div>
					</el-col>
					<el-col  :sm="8">
						<div class="form-wrapper  record">
							<div class="from-title-wrapper  noborder">
								<span class="from-title">
									提现记录
								</span>
							</div>
							<el-table class="table" empty-text ref="withdrawdepositRecord" :data="withdrawdepositRecordtableData" tooltip-effect="dark" style="width: 100%">
								<el-table-column label="月份" width="auto">
									<template slot-scope="scope">
										{{scope.row.withdrawdepositTime? scope.row.withdrawdepositTime : '-'}}
									</template>
								</el-table-column>
						
						
								<el-table-column label="订单实付金额" width="auto">
									<template slot-scope="scope">
										{{scope.row.withdrawdepositMoney? '¥ ' + scope.row.withdrawdepositMoney : '-'}}
									</template>
								</el-table-column>
								
								<el-table-column label="结算状态" width="auto">
									<template slot-scope="scope">
										<span v-html="handlestatusText(scope.row.status)"></span>
									</template>
								</el-table-column>
							</el-table>
							<div class="pagination-wrapper">
<!-- 								<div class="total-wrapper">
									<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
									<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
										<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</div> -->
								<el-pagination :page-size="pageInfo2.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange2"
								 :current-page="pageInfo2.currentPage" layout="prev, pager, next" :total="pageInfo2.totalSize">
								</el-pagination>
							</div>
						
						</div>
					</el-col>
				</el-row>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						rules:{
          accountName: [
            { required: true, message: '请输入账户名', trigger: 'blur' },
          ],
          accountNum: [
            { required: true, message: '请输入支付宝账号', trigger: 'blur' }
          ]},
						dialogsettingAccount:  false ,  // 设置账户信息的dialog
						earningsInfo: {  // 收益信息
							alreadywithdrawdepositMoney: 300,   // 已提现金额
							canwithdrawdepositMoney:100  // 可提现金额
						},
						userInfo: {  // 收款人信息
							trench:'支付宝', // 渠道
							accountName: '杨洲', // 账户名
							accountNum: undefined, //  支付宝账号
						},
						userForm: {
							
						},

						// 表格数据
						tableData: [{
							monthNum: 1, // 月份
							orderActualpaymoney: 2000, // 订单实付金额
							orderRefundmoney: 200, // 降配/退款金额
							validPayMonty: 1600, // 有效支付金额
							waitconfirmMoney: 3800, // 待确认金额
							commissionRate: 0.3, // 佣金百分比    有效佣金
							withdrawdepositMoney: 34, // 可提现金额
						}, {
							monthNum: 1, // 月份
							orderActualpaymoney: 2000, // 订单实付金额
							orderRefundmoney: 200, // 降配/退款金额
							validPayMonty: 1600, // 有效支付金额
							waitconfirmMoney: 3800, // 待确认金额
							commissionRate: 0.3, // 佣金百分比    有效佣金
							withdrawdepositMoney: 34, // 可提现金额
						}, {
							monthNum: 1, // 月份
							orderActualpaymoney: 2000, // 订单实付金额
							orderRefundmoney: 200, // 降配/退款金额
							validPayMonty: 1600, // 有效支付金额
							waitconfirmMoney: 3800, // 待确认金额
							commissionRate: 0.3, // 佣金百分比    有效佣金
							withdrawdepositMoney: 34, // 可提现金额
						},{
							monthNum: 1, // 月份
							orderActualpaymoney: 2000, // 订单实付金额
							orderRefundmoney: 200, // 降配/退款金额
							validPayMonty: 1600, // 有效支付金额
							waitconfirmMoney: 3800, // 待确认金额
							commissionRate: 0.3, // 佣金百分比    有效佣金
							withdrawdepositMoney: 34, // 可提现金额
						}],
						// 分页信息
						pageInfo: {
							pagesize: 4,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 4,
							label: '4条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],
						// 记录分页信息
						pageInfo2: {
							pagesize: 4,
							currentPage: 1,
							totalSize: 51
						},
						
						
						// 提现记录数据
						withdrawdepositRecordtableData:[{
							withdrawdepositTime:'2021-04-14',
							withdrawdepositMoney:1950,
							status:'settle'  //  settle  结算  ; nosettle  未结算；checking  审核中
						},{
							withdrawdepositTime:'2021-05-14',
							withdrawdepositMoney:1950,
							status:'nosettle'  //  settle  结算  ; nosettle  未结算；checking  审核中
						},{
							withdrawdepositTime:'2021-06-14',
							withdrawdepositMoney:1950,
							status:'nosettle'  //  settle  结算  ; nosettle  未结算；checking  审核中
						},{
							withdrawdepositTime:'2021-07-14',
							withdrawdepositMoney:1950,
							status:'checking'  //  settle  结算  ; nosettle  未结算；checking  审核中
						},]

					}
				},
				computed:{
					// 是否可以提现
					canWithdrawdeposit:function() {
						// 可提现金额大于100 就可以提现
						if(Number(this.earningsInfo.canwithdrawdepositMoney) >= 100) {
							return true
						}
						return false
					},
					// 是否有账户信息   即显示设置账户还是修改账户
					haveAccountInfo: function() {
						if(this.userInfo.accountName  !== undefined  &&  this.userInfo.accountNum  !== undefined) {
							return true
						}
						return false
					},
				},
				
				methods: {
					//  关闭dialog
					closedialog:function(formName)  {
						this.$refs[formName].resetFields();
					},
					
					// 保存设置账户信息
					saveSettingAccount: _throttle(function(formName) {
						let  that = this
						this.$refs[formName].validate(function(valid) {
						  if (valid) {
							  console.log('这里实际应该去调用后台接口')
							  //  如果接返回成功  再更新收款人信息
							  that.userInfo = deepCopy(that.userForm) 
							  
								that.$message.success('保存成功！')
							
							that.dialogsettingAccount = false
							
						  } else {
							console.log('error submit!!');
						  }
						});
					}),
					
					// 点击设置账户
					handleClicksettingaccount: _throttle(function() {
						// 深拷贝 一份数据
						this.userForm = deepCopy(this.userInfo) 
						this.dialogsettingAccount = true
					}),
					
					// 点击立即提现
					submitwithdrawdepositMoney:_throttle(function() {
						if(this.canWithdrawdeposit ===  false) {
							 return
						}
						// 成功时 提示
						this.$message.success('提现申请成功！')
						
						// this.$message.error('提现申请失败！')   失败时提示
					}),
					
					
					
					// 处理status 状态
					handlestatusText : function(status) {
						let statusText
						switch (status){
							case 'settle':
								statusText = '<span style="color:#6462F3">已结算</span>'     
								break;
							case 'nosettle':
								statusText = '<span style="color:#333333">未结算</span>'     
								break;
							case 'checking':
								statusText = '<span style="color:#FF9B3F">审核中</span>'     
								break;
							default:
								break;
						}
						return statusText
					},
					
					
					// 点击更改查询推广效果的周期
					handclickChangeQueryTime: function(key) {
						if (this.activeTimeMethod === key) {
							return
						}
						this.activeTimeMethod = key
						console.log('当前选中的周期为' + this.activeTimeMethod)
					},


					//  改变查询推广效果自定义选择时间
					changecustomselectTime: function(val) {
						if (val === null || val === undefined) {
							console.log('清空自定义查询,此时查询条件自动变为30天')
							this.activeTimeMethod = 'monthly'
						} else {
							this.activeTimeMethod = 'custom'
						}
						console.log(val)
					},

					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},
					// 分页 - 改变一页展示的条目
					handleSizeChange: function(e) {
						console.log(e)
						console.log('这里要同时改变佣金详情和提现记录')  
						this.pageInfo.pagesize =  e
						this.pageInfo2.pagesize =  e
					},
					// 分页 - 当前页数
					handleCurrentChange: function(val) {
						console.log('当前页为' + val)
					},
					// 分页 - 当前页数   提现记录
					handleCurrentChange2: function(val) {
						console.log('当前页为' + val)
					},
				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
